<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>EventSource example</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <script src="./eventsource.js"></script>


    <script>

        /*
        var esp = new EventSourcePolyfill('sse.php', {
            headers: {
            'X-Custom-Header': 'value'
            }
        });

        esp.onmessage = function(e){
            console.log(e.data);
        };
        */

        let es;

        function start() {
            es = new EventSource("sse.php");
            var listener = function (event) {
                var div = document.createElement("div");
                var type = event.type;
                div.appendChild(document.createTextNode(type + ": " + (type === "message" ? event.data : es.url)));
                document.body.appendChild(div);
            };
            es.addEventListener("open", listener);
            es.addEventListener("message", listener);
            es.addEventListener("error", listener);
        }

        function stop() {
            es.close();
        }

        function log(msg) {
            var logElem = document.getElementById('logbox');
            logElem.innerHTML += msg + "<br>";
            document.documentElement.scrollTop = 99999999;
        }
    </script>
</head>

<body>
    <button onclick="start()">Start</button> Press the "Start" to begin.
    <div id="logElem" style="margin: 6px 0"></div>
    <button onclick="stop()">Stop</button> "Stop" to finish.

    <div id="logbox"></div>
</body>

</html>